<template>
  <div class="machine">
    <!--  标题区域  -->
    <div class="flex flex-a-c">
      <div class="machine-title colorin white">机床信息</div>
      <a-button
        v-if="show"
        icon="check-circle"
        type="primary"
        @click="handleEdit"
        >完成
      </a-button>
      <a-button v-else icon="edit" type="primary" @click="handleEdit"
        >编辑
      </a-button>
    </div>
    <br />
    <!--  内容区域  -->
    <a-form-model :labelCol="labelCol" :model="model" :wrapperCol="wrapperCol">
      <a-row :gutter="24">
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="SN号">
            <span v-if="!show" class="colorin">{{ model.macSn || "" }}</span>
            <a-input
              v-else
              v-model="model.macSn"
              :disabled="true"
              placeholder="请输入SN号"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="设备规格">
            <span v-if="!show" class="colorin">{{
              model.equipmentSpecification || ""
            }}</span>
            <a-input
              v-else
              v-model="model.equipmentSpecification"
              placeholder="请输入设备规格"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="设备编号">
            <span v-if="!show" class="colorin">{{
              model.equipmentNumber || ""
            }}</span>
            <a-input
              v-else
              v-model="model.equipmentNumber"
              placeholder="请输入设备编号"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="设备型号">
            <span v-if="!show" class="colorin">{{
              model.equipmentModel || ""
            }}</span>
            <a-input
              v-else
              v-model="model.equipmentModel"
              placeholder="请输入设备型号"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!--   line-2  -->
      <a-row :gutter="24">
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="联网方式">
            <span v-if="!show" class="colorin">{{ model.networkWayName }}</span>
            <a-select
              v-else
              v-model="model.networkWay"
              :default-value="model.networkWay"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              placeholder="请选择联网方式"
              style="width:100%"
            >
              <a-select-option
                v-for="item in netTypeArray"
                :key="item.id"
                :value="item.id"
              >
                {{ item.dictName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="设备类型">
            <span v-if="!show" class="colorin">{{
              model.equipmentTypeName || ""
            }}</span>
            <a-tree-select
              v-else
              v-model="model.equipmentType"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :replaceFields="{
                children: 'equipmentTypeList',
                title: 'equipmentTypeName',
                key: 'id',
                value: 'id',
              }"
              :tree-data="equipmentTypeList"
              allow-clear
              placeholder="请选择设备类型"
              show-search
              style="width: 100%"
              tree-default-expand-all
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!--   line-4  -->
      <a-row>
        <a-col :xl="11" :xxl="11">
          <a-form-model-item
            :labelCol="{
              xl: { span: 3 },
              xxl: { span: 3 },
            }"
            :wrapperCol="{
              xl: { span: 21 },
              xxl: { span: 21 },
            }"
            label="机床图片"
          >
            <div class="imgBox">
              <div v-for="item in pictureList" :key="item.name" class="imgItem">
                <imageUpload
                  v-if="show"
                  v-model="item.fileObj"
                  :imagUrl="item.img ? item.img : ''"
                  :type="2"
                  :width="'50px'"
                />
                <img
                  v-else
                  :onerror="onerrorpicture"
                  :src="item.img"
                  alt=""
                  class="picture"
                  @click="openimg(item.img)"
                />
                <div class="colorin">
                  {{ item.name }}
                </div>
              </div>
            </div>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-modal
      :footer="null"
      :visible="previewVisibleopen"
      @cancel="previewVisibleopen = false"
    >
      <img :src="previewimg" alt="example" style="width: 100%" />
    </a-modal>
  </div>
</template>

<script>
import api from "@api/apiServer";
import { pictureUrl } from "@/api/URLConfig";
import { equipmentType, toolData } from "./config";
import imageUpload from "@components/upload/upload.vue";

export default {
  name: "MachineTool",
  data() {
    return {
      netTypeArray: [],
      equipmentTypeList: [],
      equipmentType,
      pictureList: [
        { name: "正面", value: "positive" },
        { name: "侧面", value: "side" },
        { name: "刀库", value: "knife" },
        { name: "电柜", value: "electric" },
        { name: "导轨", value: "guide" },
      ], // 机床图片
      toolData,
      guideRadio: ["线轨", "硬轨"],
      macNameIndex: 0,
      onerrorpicture: 'this.src="' + require("@images/imgdefult.png") + '"',
      previewVisibleopen: false,
      previewimg: "",
      model: {},
      // show: false,
      show: false,
      labelCol: {
        xl: { span: 6 },
        xxl: { span: 6 },
      },
      wrapperCol: {
        xl: { span: 18 },
        xxl: { span: 18 },
      },
    };
  },
  components: { imageUpload },
  computed: {
    macSN() {
      return this.$route.query.macSn;
    },
    imgUrl() {
      return pictureUrl;
    },
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  mounted() {
    this.getDictFindByCode();
    this.getEquipmentTypeList();
    this.getSelArchiveAndGuide();
    console.log(this.imgUrl);
  },
  methods: {
    // 导轨新增
    handleAdd() {
      this.model.toolGuide.push({ guideAxis: "", guideType: "线轨" });
    },
    // 导轨删除
    handleDelete(index) {
      this.model.toolGuide.splice(index, 1);
    },
    openimg(img) {
      if (img) {
        this.previewimg = this.img;
        this.previewVisibleopen = true;
      }
    },
    // 机床信息编辑
    handleEdit() {
      if (this.show) {
        this.$emit("setAlarm");
        this.updateArchiveAndGuide();
      } else {
        this.show = true;
        this.$forceUpdate();
      }
    },
    async updateArchiveAndGuide() {
      let picture = {};
      this.pictureList.forEach((item) => {
        if (item.fileObj && item.fileObj.length > 0) {
          picture[item.value] = item.fileObj[0].id + "";
        }
      });
      if (!this.model.equipmentModel || this.model.equipmentModel === "") {
        this.$message.error("请输入设备型号");
        return;
      }
      if (!this.equipmentType) {
        this.$message.error("请选择设备类型");
        return;
      }

      let params = {
        macSn: this.model.macSn,
        pictureId: JSON.stringify(picture),
        equipmentSpecification: this.model.equipmentSpecification,
        equipmentNumber: this.model.equipmentNumber,
        equipmentModel: this.model.equipmentModel,
        networkWay: this.model.networkWay,
        equipmentType: this.model.equipmentType,
      };

      const res = await api.UpdateArchiveAndGuide(params);
      if (res.code === 200) {
        this.$message.success(res.message);
        await this.getSelArchiveAndGuide();
        this.show = false;
      } else {
        this.$message.error(res.message);
      }
    },
    // 机床信息
    async getSelArchiveAndGuide() {
      const { data: res } = await api.selArchiveAndGuide({ macSn: this.macSN });
      this.model = res.equipment;
      this.model.picture = res.pictures;
      if (this.model.networkWay) {
        this.model.networkWayName = this.netTypeArray.find(
          (item) => item.id === this.model.networkWay
        ).dictName;
      }
      this.pictureList.forEach((element) => {
        let item = this.model.picture.find(
          (item) => item.description === element.value
        );

        if (item) {
          element.img = item.pictureUrl;
          element.id = item.id;
          element.fileObj = [{ id: "" }];
          element.fileObj[0].id = item.id;
        } else {
          element.img = "";
        }

        if (this.model.macName) {
          this.macName = this.model.macName.split("&");
        }
      });
    },
    // 获取设备类型数据源
    async getEquipmentTypeList() {
      const { data: res } = await api.equipmentTypeList();
      this.equipmentTypeList = res;
    },
    // 获取联网方式数据源
    async getDictFindByCode() {
      const { data: res } = await api.DictFindByCode({
        parentCode: "dict.networkWay",
      });
      this.netTypeArray = res;
    },
  },
};
</script>

<style lang="less" scoped>
.machine {
  font-family: Microsoft YaHei;

  .machine-title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-right: 20px;
  }

  .ant-input[disabled] {
    background: rgba(0, 0, 0, 0.25) !important;
  }

  .imgBox {
    overflow: hidden;
    margin-top: 10px;

    .imgItem {
      width: 100px;
      float: left;
      margin-right: 20px;
    }

    .picture {
      width: 80px;
      height: 80px;
    }

    div {
      text-align: center;
      width: 100%;
    }
  }

  .guideAdd {
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #2399f1;
    background: rgba(35, 153, 241, 0.2);
    border-radius: 4px;
    color: rgba(35, 153, 241, 1);
    margin: 5px 5px 32px 5px;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      margin-left: 5px;
    }
  }

  .guideBox {
    margin: 20px 0;
  }

  .guideRadio {
    width: 78px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #e5e8ee;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    margin: 0 10px;
  }

  .guideCheck {
    border: 1px solid #2399f1;
  }
}
</style>
